<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>泡泡玛特 - 管理员后台系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Roboto', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }


        :root {
            --primary: #7e57c2;  /* 泡泡玛特紫色 */
            --primary-dark: #5e35b1;
            --primary-light: #b39ddb;
            --secondary: #ff7043; /* 泡泡玛特橙色 */
            --accent: #26a69a;
            --success: #66bb6a;
            --warning: #ffca28;
            --danger: #ef5350;
            --light: #f5f5f5;
            --dark: #333;
            --text: #424242;
            --sidebar-width: 260px;
            --header-height: 70px;
        }


        body {
            background: linear-gradient(135deg, #f0f4f8 0%, #e3e9f1 100%);
            min-height: 100vh;
            color: var(--text);
            overflow-x: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }


        .container {
            width: 100%;
            max-width: 1400px;
            height: 90vh;
            background: #fff;
            border-radius: 20px;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
            overflow: hidden;
            display: flex;
            position: relative;
        }


        /* 登录页面样式 */
        .login-container {
            display: flex;
            width: 100%;
            height: 100%;
        }


        .login-left {
            flex: 1;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 40px;
            color: white;
            text-align: center;
            position: relative;
            overflow: hidden;
        }


        .login-left::before {
            content: "";
            position: absolute;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            top: -100px;
            left: -100px;
        }


        .login-left::after {
            content: "";
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.08);
            bottom: -80px;
            right: -80px;
        }


        .brand-logo {
            width: 120px;
            height: 120px;
            background: white;
            border-radius: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 30px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
            z-index: 2;
        }


        .brand-logo i {
            font-size: 60px;
            color: var(--primary);
        }


        .brand-text {
            font-size: 42px;
            font-weight: 800;
            letter-spacing: 1px;
            margin-bottom: 15px;
            z-index: 2;
            text-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
        }


        .login-left p {
            font-size: 18px;
            max-width: 500px;
            line-height: 1.6;
            opacity: 0.9;
            z-index: 2;
        }


        .bubble-animation {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;
        }


        .bubble {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.15);
            animation: float 15s infinite linear;
        }


        .bubble:nth-child(1) { width: 80px; height: 80px; top: 10%; left: 20%; animation-duration: 18s; }
        .bubble:nth-child(2) { width: 120px; height: 120px; top: 50%; left: 70%; animation-duration: 22s; }
        .bubble:nth-child(3) { width: 60px; height: 60px; top: 70%; left: 40%; animation-duration: 14s; }
        .bubble:nth-child(4) { width: 100px; height: 100px; top: 30%; left: 50%; animation-duration: 20s; }
        .bubble:nth-child(5) { width: 50px; height: 50px; top: 80%; left: 10%; animation-duration: 16s; }


        @keyframes float {
            0% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-30px) rotate(180deg); }
            100% { transform: translateY(0) rotate(360deg); }
        }


        .login-right {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 40px;
            background: white;
        }


        .login-form {
            width: 100%;
            max-width: 400px;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        }


        .login-form h2 {
            text-align: center;
            margin-bottom: 30px;
            color: var(--primary);
            font-size: 28px;
            font-weight: 600;
        }


        .form-group {
            margin-bottom: 25px;
        }


        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--dark);
        }


        .input-with-icon {
            position: relative;
        }


        .input-with-icon i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--primary);
        }


        .form-control {
            width: 100%;
            padding: 14px 15px 14px 45px;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            font-size: 16px;
            background: #f8f9fa;
            transition: all 0.3s;
        }


        .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(126, 87, 194, 0.15);
            outline: none;
            background: white;
        }


        .btn {
            display: block;
            width: 100%;
            padding: 15px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 17px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 10px;
        }


        .btn:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(126, 87, 194, 0.3);
        }


        .error-message {
            color: var(--danger);
            text-align: center;
            margin-top: 20px;
            font-size: 15px;
            display: none;
        }


        /* 主界面样式 */
        .main-container {
            display: none;
            width: 100%;
            height: 100%;
        }


        .sidebar {
            width: var(--sidebar-width);
            background: linear-gradient(to bottom, var(--primary), var(--primary-dark));
            color: white;
            padding: 25px 0;
            position: relative;
            z-index: 10;
        }


        .brand {
            display: flex;
            align-items: center;
            padding: 0 25px 25px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        }


        .admin-info {
            display: flex;
            align-items: center;
            padding: 25px 25px 15px;
        }


        .admin-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(45deg, var(--secondary), var(--warning));
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            font-weight: bold;
            margin-right: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }


        .admin-details h3 {
            font-size: 18px;
            margin-bottom: 5px;
            font-weight: 500;
        }


        .admin-details p {
            font-size: 14px;
            opacity: 0.8;
        }


        .nav-menu {
            padding: 20px 0;
        }


        .nav-item {
            padding: 14px 25px;
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
            font-size: 16px;
        }


        .nav-item:hover {
            background: rgba(255, 255, 255, 0.1);
        }


        .nav-item.active {
            background: rgba(255, 255, 255, 0.15);
            border-left: 4px solid var(--secondary);
        }


        .nav-item i {
            margin-right: 15px;
            font-size: 20px;
            width: 24px;
            text-align: center;
        }


        .nav-item.active::before {
            content: "";
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            border: 10px solid transparent;
            border-right-color: white;
        }


        .sidebar-footer {
            padding: 20px 25px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.15);
            position: absolute;
            bottom: 20px;
            width: 100%;
        }


        .logout-btn {
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            cursor: pointer;
            padding: 12px 20px;
            width: 100%;
            border-radius: 8px;
            transition: all 0.3s;
        }


        .logout-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }


        .logout-btn i {
            margin-right: 10px;
        }


        /* 主内容区样式 */
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }


        .header {
            height: var(--header-height);
            padding: 0 30px;
            background: white;
            box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 5;
        }


        .header-title {
            font-size: 24px;
            font-weight: 600;
            color: var(--primary);
        }


        .header-actions {
            display: flex;
            gap: 15px;
        }


        .search-container {
            position: relative;
            width: 300px;
        }


        .search-container input {
            width: 100%;
            padding: 12px 15px 12px 45px;
            border: 1px solid #e0e0e0;
            border-radius: 30px;
            font-size: 15px;
            background: #f8f9fa;
            transition: all 0.3s;
        }


        .search-container input:focus {
            border-color: var(--primary-light);
            box-shadow: 0 0 0 3px rgba(126, 87, 194, 0.1);
            outline: none;
            background: white;
        }


        .search-container i {
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateY(-50%);
            color: #9e9e9e;
            font-size: 18px;
        }


        .notification-btn, .user-btn {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: var(--text);
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
        }


        .notification-btn:hover, .user-btn:hover {
            background: var(--primary-light);
            color: white;
        }


        .notification-badge {
            position: absolute;
            top: 3px;
            right: 3px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--danger);
            color: white;
            font-size: 11px;
            display: flex;
            align-items: center;
            justify-content: center;
        }


        /* 内容区样式 */
        .content {
            flex: 1;
            padding: 30px;
            overflow-y: auto;
            background: #f8f9fc;
        }


        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 25px;
            margin-bottom: 35px;
        }


        .stat-card {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            transition: transform 0.3s, box-shadow 0.3s;
        }


        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }


        .stat-icon {
            width: 65px;
            height: 65px;
            border-radius: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 28px;
            margin-right: 20px;
            color: white;
        }


        .stat-content h3 {
            font-size: 28px;
            margin-bottom: 5px;
            color: var(--dark);
        }


        .stat-content p {
            color: #757575;
            font-size: 16px;
        }


        .table-container {
            background: white;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }


        .table-header {
            padding: 20px 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eee;
        }


        .table-header h2 {
            font-size: 20px;
            color: var(--dark);
            font-weight: 600;
        }


        .table-actions {
            display: flex;
            gap: 12px;
        }


        .action-btn {
            padding: 10px 18px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s;
        }


        .action-btn:hover {
            background: var(--primary-dark);
            box-shadow: 0 5px 15px rgba(126, 87, 194, 0.3);
        }


        .action-btn i {
            margin-right: 8px;
        }


        table {
            width: 100%;
            border-collapse: collapse;
        }


        thead {
            background: #f8f9fc;
        }


        th {
            padding: 16px 25px;
            text-align: left;
            color: var(--dark);
            font-weight: 600;
            border-bottom: 1px solid #eee;
        }


        td {
            padding: 16px 25px;
            border-bottom: 1px solid #eee;
            color: var(--text);
        }


        tbody tr {
            transition: background-color 0.2s;
        }


        tbody tr:hover {
            background-color: #fafafa;
        }


        .pagination {
            display: flex;
            justify-content: center;
            padding: 25px;
            gap: 8px;
        }


        .pagination button {
            width: 38px;
            height: 38px;
            border: 1px solid #e0e0e0;
            background: white;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            transition: all 0.3s;
        }


        .pagination button:hover:not(.active) {
            border-color: var(--primary);
            color: var(--primary);
        }


        .pagination button.active {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }


        /* 加载动画 */
        .loader {
            display: flex;
            justify-content: center;
            padding: 30px;
        }


        .loader-dot {
            width: 12px;
            height: 12px;
            background: var(--primary);
            border-radius: 50%;
            margin: 0 5px;
            animation: loader 1.2s infinite ease-in-out;
        }


        .loader-dot:nth-child(2) {
            animation-delay: 0.2s;
        }


        .loader-dot:nth-child(3) {
            animation-delay: 0.4s;
        }


        @keyframes loader {
            0%, 80%, 100% { transform: scale(0); }
            40% { transform: scale(1); }
        }

        /* 新增：空状态提示 */
        .empty-state {
            text-align: center;
            padding: 50px 20px;
            color: #9e9e9e;
        }

        .empty-state i {
            font-size: 60px;
            margin-bottom: 20px;
            opacity: 0.3;
        }

        .empty-state p {
            font-size: 18px;
        }

        /* 新增：管理部分切换 */
        .management-section {
            display: none;
        }

        .management-section.active {
            display: block;
        }

        /* 新增：库存状态标签 */
        .stock-status {
            display: inline-block;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
        }

        .in-stock {
            background: rgba(102, 187, 106, 0.15);
            color: #2e7d32;
        }

        .low-stock {
            background: rgba(255, 202, 40, 0.15);
            color: #f57f17;
        }

        .out-of-stock {
            background: rgba(239, 83, 80, 0.15);
            color: #c62828;
        }

        /* 新增：价格样式 */
        .price-tag {
            font-weight: bold;
            color: var(--primary-dark);
        }


        /* 新增：订单状态标签 */
        .order-status {
            display: inline-block;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
        }

        .status-pending {
            background: rgba(255, 202, 40, 0.15);
            color: #f57f17;
        }

        .status-paid {
            background: rgba(66, 133, 244, 0.15);
            color: #1967d2;
        }

        .status-shipped {
            background: rgba(123, 31, 162, 0.15);
            color: #7b1fa2;
        }

        .status-completed {
            background: rgba(102, 187, 106, 0.15);
            color: #2e7d32;
        }

        .status-cancelled {
            background: rgba(239, 83, 80, 0.15);
            color: #c62828;
        }

        /* 新增：筛选区域 */
        .filters {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .filter-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .filter-group label {
            font-weight: 500;
            color: var(--dark);
        }

        .filter-group select, .filter-group input {
            padding: 8px 15px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            background: #f8f9fa;
            transition: all 0.3s;
        }

        .filter-group select:focus, .filter-group input:focus {
            border-color: var(--primary);
            outline: none;
        }

        .filter-btn {
            padding: 8px 15px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .filter-btn:hover {
            background: var(--primary-dark);
        }


        /* 响应式设计 */
        @media (max-width: 1200px) {
            .sidebar {
                width: 80px;
            }


            .admin-details, .nav-item span {
                display: none;
            }


            .brand {
                justify-content: center;
                padding: 20px 0;
            }


            .admin-info {
                justify-content: center;
                padding: 20px 0;
            }


            .nav-item {
                justify-content: center;
            }


            .nav-item i {
                margin-right: 0;
                font-size: 22px;
            }


            .sidebar-footer {
                padding: 20px 10px;
            }


            .logout-btn span {
                display: none;
            }
        }


        @media (max-width: 900px) {
            .container {
                height: auto;
                min-height: 90vh;
            }


            .login-container {
                flex-direction: column;
                height: auto;
            }


            .login-left {
                padding: 60px 20px;
            }


            .brand-text {
                font-size: 32px;
            }


            .login-right {
                padding: 40px 20px;
            }


            .stats-container {
                grid-template-columns: 1fr;
            }


            .header {
                flex-direction: column;
                height: auto;
                padding: 15px;
                gap: 15px;
            }


            .header-title {
                align-self: flex-start;
            }


            .search-container {
                width: 100%;
            }


            .table-header {
                flex-direction: column;
                gap: 15px;
                align-items: flex-start;
            }


            .table-actions {
                width: 100%;
                justify-content: center;
            }

            .filters {
                flex-direction: column;
                gap: 10px;
            }

        }
    </style>
</head>
<body>
<div class="container">
    <!-- 登录界面 -->
    <div class="login-container" id="login-container">
        <div class="login-left">
            <div class="bubble-animation">
                <div class="bubble"></div>
                <div class="bubble"></div>
                <div class="bubble"></div>
                <div class="bubble"></div>
                <div class="bubble"></div>
            </div>
            <div class="brand-logo">
                <i class="fas fa-palette"></i>
            </div>
            <div class="brand-text">泡泡玛特</div>
            <p>欢迎使用泡泡玛特后台管理系统<br>高效管理用户、商品和订单数据，提供全方位的管理支持</p>
        </div>
        <div class="login-right">
            <div class="login-form">
                <h2>管理员登录</h2>
                <div class="form-group">
                    <label for="username">管理员账号</label>
                    <div class="input-with-icon">
                        <i class="fas fa-user"></i>
                        <input type="text" id="username" class="form-control" placeholder="请输入管理员账号">
                    </div>
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <div class="input-with-icon">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="password" class="form-control" placeholder="请输入密码">
                    </div>
                </div>
                <button class="btn" id="login-btn">
                    <i class="fas fa-sign-in-alt"></i> 登录系统
                </button>
                <div class="error-message" id="error-message">
                    <i class="fas fa-exclamation-circle"></i> 用户名或密码错误，请重试
                </div>
            </div>
        </div>
    </div>


    <!-- 主界面 -->
    <div class="main-container" id="main-container">
        <div class="sidebar">
            <div class="brand">
                <div class="brand-logo" style="width: 40px; height: 40px; border-radius: 12px;">
                    <i class="fas fa-palette" style="font-size: 20px;"></i>
                </div>
                <div class="brand-text">泡泡玛特</div>
            </div>


            <div class="admin-info">
                <div class="admin-avatar">A</div>
                <div class="admin-details">
                    <h3 id="admin-name">管理员</h3>
                    <p>超级管理员</p>
                </div>
            </div>


            <div class="nav-menu">
                <div class="nav-item active" data-section="user-management">
                    <i class="fas fa-users"></i>
                    <span>用户管理</span>
                </div>
                <div class="nav-item" data-section="product-management">
                    <i class="fas fa-shopping-bag"></i>
                    <span>商品管理</span>
                </div>
                <div class="nav-item active" data-section="order-management">
                    <i class="fas fa-shopping-cart"></i>
                    <span>订单管理</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-chart-pie"></i>
                    <span>数据分析</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-cog"></i>
                    <span>系统设置</span>
                </div>
            </div>


            <div class="sidebar-footer">
                <button class="logout-btn" id="logout-btn">
                    <i class="fas fa-sign-out-alt"></i>
                    <span>退出登录</span>
                </button>
            </div>
        </div>


        <div class="main-content">
            <div class="header">
                <h1 class="header-title" id="header-title">用户管理</h1>
                <div class="header-actions">
                    <div class="search-container">
                        <i class="fas fa-search"></i>
                        <input type="text" id="search-input" placeholder="搜索用户...">
                    </div>
                    <div class="notification-btn">
                        <i class="fas fa-bell"></i>
                        <div class="notification-badge">3</div>
                    </div>
                    <div class="user-btn">
                        <i class="fas fa-user"></i>
                    </div>
                </div>
            </div>


            <div class="content">
                <!-- 用户管理部分 -->
                <div id="user-management" class="management-section active">
                    <div class="stats-container">
                        <div class="stat-card">
                            <div class="stat-icon" style="background: linear-gradient(45deg, var(--primary), var(--primary-light));">
                                <i class="fas fa-users"></i>
                            </div>
                            <div class="stat-content">
                                <h3 id="total-users">0</h3>
                                <p>总用户数</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon" style="background: linear-gradient(45deg, var(--success), #81c784);">
                                <i class="fas fa-user-check"></i>
                            </div>
                            <div class="stat-content">
                                <h3 id="active-users">0</h3>
                                <p>活跃用户</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon" style="background: linear-gradient(45deg, var(--secondary), #ff9e80);">
                                <i class="fas fa-shopping-cart"></i>
                            </div>
                            <div class="stat-content">
                                <h3 id="tot-orders">0</h3>
                                <p>总订单数</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon" style="background: linear-gradient(45deg, var(--accent), #80cbc4);">
                                <i class="fas fa-chart-line"></i>
                            </div>
                            <div class="stat-content">
                                <h3 id="month-sales">¥0</h3>
                                <p>本月销售额</p>
                            </div>
                        </div>
                    </div>


                    <div class="table-container">
                        <div class="table-header">
                            <h2>用户列表</h2>
                            <div class="table-actions">
                                <button class="action-btn">
                                    <i class="fas fa-plus"></i>
                                    新增用户
                                </button>
                                <button class="action-btn">
                                    <i class="fas fa-file-export"></i>
                                    导出数据
                                </button>
                                <button class="action-btn" id="refresh-users">
                                    <i class="fas fa-sync-alt"></i>
                                    刷新数据
                                </button>
                            </div>
                        </div>


                        <table>
                            <thead>
                            <tr>
                                <th>用户ID</th>
                                <th>用户名</th>
                                <th>性别</th>
                                <th>邮箱</th>
                                <th>电话</th>
                                <th>生日</th>
                            </tr>
                            </thead>
                            <tbody id="user-table-body">
                            <!-- 用户数据将通过JS动态填充 -->
                            </tbody>
                        </table>


                        <div class="loader" id="user-loader">
                            <div class="loader-dot"></div>
                            <div class="loader-dot"></div>
                            <div class="loader-dot"></div>
                        </div>

                        <div id="user-empty" class="empty-state" style="display: none;">
                            <i class="fas fa-user-slash"></i>
                            <p>暂无用户数据</p>
                        </div>


                        <div class="pagination">
                            <button><i class="fas fa-chevron-left"></i></button>
                            <button class="active">1</button>
                            <button>2</button>
                            <button>3</button>
                            <button>4</button>
                            <button>5</button>
                            <button><i class="fas fa-chevron-right"></i></button>
                        </div>
                    </div>
                </div>

                <!-- 商品管理部分 -->
                <div id="product-management" class="management-section">
                    <div class="stats-container">
                        <div class="stat-card">
                            <div class="stat-icon" style="background: linear-gradient(45deg, var(--primary), var(--primary-light));">
                                <i class="fas fa-box"></i>
                            </div>
                            <div class="stat-content">
                                <h3 id="total-products">0</h3>
                                <p>商品总数</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon" style="background: linear-gradient(45deg, var(--success), #81c784);">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <div class="stat-content">
                                <h3 id="available-products">0</h3>
                                <p>在售商品</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon" style="background: linear-gradient(45deg, var(--secondary), #ff9e80);">
                                <i class="fas fa-star"></i>
                            </div>
                            <div class="stat-content">
                                <h3 id="popular-products">0</h3>
                                <p>热门商品</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon" style="background: linear-gradient(45deg, var(--accent), #80cbc4);">
                                <i class="fas fa-money-bill-wave"></i>
                            </div>
                            <div class="stat-content">
                                <h3 id="product-sales">¥0</h3>
                                <p>总销售额</p>
                            </div>
                        </div>
                    </div>


                    <div class="table-container">
                        <div class="table-header">
                            <h2>商品列表</h2>
                            <div class="table-actions">
                                <button class="action-btn">
                                    <i class="fas fa-plus"></i>
                                    新增商品
                                </button>
                                <button class="action-btn">
                                    <i class="fas fa-file-export"></i>
                                    导出数据
                                </button>
                                <button class="action-btn" id="refresh-products">
                                    <i class="fas fa-sync-alt"></i>
                                    刷新数据
                                </button>
                            </div>
                        </div>


                        <table>
                            <thead>
                            <tr>
                                <th>商品ID</th>
                                <th>商品名称</th>
                                <th>类别</th>
                                <th>价格</th>
                                <th>库存</th>
                                <th>状态</th>
                            </tr>
                            </thead>
                            <tbody id="product-table-body">
                            <!-- 商品数据将通过JS动态填充 -->
                            </tbody>
                        </table>


                        <div class="loader" id="product-loader">
                            <div class="loader-dot"></div>
                            <div class="loader-dot"></div>
                            <div class="loader-dot"></div>
                        </div>

                        <div id="product-empty" class="empty-state" style="display: none;">
                            <i class="fas fa-box-open"></i>
                            <p>暂无商品数据</p>
                        </div>


                        <div class="pagination">
                            <button><i class="fas fa-chevron-left"></i></button>
                            <button class="active">1</button>
                            <button>2</button>
                            <button>3</button>
                            <button>4</button>
                            <button>5</button>
                            <button><i class="fas fa-chevron-right"></i></button>
                        </div>
                    </div>
                </div>


                <!-- 订单管理部分 -->
                <div id="order-management" class="management-section active">
                    <div class="stats-container">
                        <div class="stat-card">
                            <div class="stat-icon" style="background: linear-gradient(45deg, var(--primary), var(--primary-light));">
                                <i class="fas fa-shopping-cart"></i>
                            </div>
                            <div class="stat-content">
                                <h3 id="total-orders">0</h3>
                                <p>总订单数</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon" style="background: linear-gradient(45deg, var(--warning), #ffd54f);">
                                <i class="fas fa-clock"></i>
                            </div>
                            <div class="stat-content">
                                <h3 id="pending-orders">0</h3>
                                <p>待付款订单</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon" style="background: linear-gradient(45deg, var(--accent), #4db6ac);">
                                <i class="fas fa-truck"></i>
                            </div>
                            <div class="stat-content">
                                <h3 id="shipping-orders">0</h3>
                                <p>待发货订单</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon" style="background: linear-gradient(45deg, var(--success), #81c784);">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <div class="stat-content">
                                <h3 id="completed-orders">0</h3>
                                <p>已完成订单</p>
                            </div>
                        </div>
                    </div>

                    <div class="filters">
                        <div class="filter-group">
                            <label>订单状态：</label>
                            <select id="status-filter">
                                <option value="all">全部状态</option>
                                <option value="0">待付款</option>
                                <option value="1">已付款</option>
                                <option value="2">已发货</option>
                                <option value="3">已完成</option>
                                <option value="4">已取消</option>
                            </select>
                        </div>

                        <div class="filter-group">
                            <label>下单日期：</label>
                            <input type="date" id="start-date">
                            <span>至</span>
                            <input type="date" id="end-date">
                        </div>

                        <div class="filter-group">
                            <label>订单金额：</label>
                            <input type="number" id="min-amount" placeholder="最低金额">
                            <span>至</span>
                            <input type="number" id="max-amount" placeholder="最高金额">
                        </div>

                        <button class="filter-btn" id="apply-filters">
                            <i class="fas fa-filter"></i> 应用筛选
                        </button>
                    </div>


                    <div class="table-container">
                        <div class="table-header">
                            <h2>订单列表</h2>
                            <div class="table-actions">
                                <button class="action-btn">
                                    <i class="fas fa-file-export"></i>
                                    导出数据
                                </button>
                                <button class="action-btn" id="refresh-orders">
                                    <i class="fas fa-sync-alt"></i>
                                    刷新数据
                                </button>
                            </div>
                        </div>


                        <table>
                            <thead>
                            <tr>
                                <th>订单ID</th>
                                <th>用户ID</th>
                                <th>商品名称</th>
                                <th>数量</th>
                                <th>总价</th>
                                <th>下单时间</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="order-table-body">
                            <!-- 订单数据将通过JS动态填充 -->
                            </tbody>
                        </table>


                        <div class="loader" id="order-loader">
                            <div class="loader-dot"></div>
                            <div class="loader-dot"></div>
                            <div class="loader-dot"></div>
                        </div>

                        <div id="order-empty" class="empty-state" style="display: none;">
                            <i class="fas fa-box-open"></i>
                            <p>暂无订单数据</p>
                        </div>


                        <div class="pagination">
                            <button><i class="fas fa-chevron-left"></i></button>
                            <button class="active">1</button>
                            <button>2</button>
                            <button>3</button>
                            <button>4</button>
                            <button>5</button>
                            <button><i class="fas fa-chevron-right"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<script>
    // DOM元素
    const loginContainer = document.getElementById('login-container');
    const mainContainer = document.getElementById('main-container');
    const loginBtn = document.getElementById('login-btn');
    const logoutBtn = document.getElementById('logout-btn');
    const errorMessage = document.getElementById('error-message');
    const adminName = document.getElementById('admin-name');
    const headerTitle = document.getElementById('header-title');
    const searchInput = document.getElementById('search-input');
    const navItems = document.querySelectorAll('.nav-item');
    const managementSections = document.querySelectorAll('.management-section');

    // 用户管理相关元素
    const totalUsers = document.getElementById('total-users');
    const activeUsers = document.getElementById('active-users');
    const totalOrders = document.getElementById('total-orders');
    const monthSales = document.getElementById('month-sales');
    const userTableBody = document.getElementById('user-table-body');
    const userLoader = document.getElementById('user-loader');
    const userEmpty = document.getElementById('user-empty');
    const refreshUsersBtn = document.getElementById('refresh-users');

    // 商品管理相关元素
    const totalProducts = document.getElementById('total-products');
    const availableProducts = document.getElementById('available-products');
    const popularProducts = document.getElementById('popular-products');
    const productSales = document.getElementById('product-sales');
    const productTableBody = document.getElementById('product-table-body');
    const productLoader = document.getElementById('product-loader');
    const productEmpty = document.getElementById('product-empty');
    const refreshProductsBtn = document.getElementById('refresh-products');

    // 订单管理相关元素
    const totalOrderss = document.getElementById('tot-orders');
    const pendingOrders = document.getElementById('pending-orders');
    const shippingOrders = document.getElementById('shipping-orders');
    const completedOrders = document.getElementById('completed-orders');
    const orderTableBody = document.getElementById('order-table-body');
    const orderLoader = document.getElementById('order-loader');
    const orderEmpty = document.getElementById('order-empty');
    const refreshOrdersBtn = document.getElementById('refresh-orders');
    const applyFiltersBtn = document.getElementById('apply-filters');
    const statusFilter = document.getElementById('status-filter');
    const startDate = document.getElementById('start-date');
    const endDate = document.getElementById('end-date');
    const minAmount = document.getElementById('min-amount');
    const maxAmount = document.getElementById('max-amount');



    // 检查登录状态
    function checkLoginStatus() {
        const isLoggedIn = sessionStorage.getItem('adminLoggedIn');
        if (isLoggedIn) {
            loginContainer.style.display = 'none';
            mainContainer.style.display = 'flex';
            fetchUsers();
        }
    }


    // 从数据库获取用户数据
    function fetchUsers() {
        // 显示加载动画
        userLoader.style.display = 'flex';
        userEmpty.style.display = 'none';


        // 调用后端API获取用户数据
        fetch('/admin/users')
            .then(response => response.json())
            .then(userData => {
                renderUserTable(userData);
                totalUsers.textContent = userData.length;

                // 模拟其他统计数据
                activeUsers.textContent = Math.floor(userData.length * 0.75);
                totalOrders.textContent = userData.length * 3;
                monthSales.textContent = '¥' + (userData.length * 300).toLocaleString();

                // 隐藏加载动画
                userLoader.style.display = 'none';
            })
            .catch(error => {
                console.error('获取用户数据失败:', error);
                userLoader.style.display = 'none';
                userEmpty.style.display = 'block';
            });
    }


    // 渲染用户表格
    function renderUserTable(userData) {
        userTableBody.innerHTML = '';


        if (userData.length === 0) {
            userEmpty.style.display = 'block';
            return;
        }


        userData.forEach(user => {
            const row = document.createElement('tr');
            const birthdayStr = user.uBirthday ? new Date(user.uBirthday).toISOString().split('T')[0] : '未设置';


            row.innerHTML = `
                <td>${user.uId}</td>
                <td><strong>${user.uName}</strong></td>
                <td>${user.uSex || '未设置'}</td>
                <td>${user.uEmail || '未设置'}</td>
                <td>${user.uPhone || '未设置'}</td>
                <td>${birthdayStr}</td>
            `;


            userTableBody.appendChild(row);
        });
    }

    // 从数据库获取商品数据
    function fetchProducts() {
        // 显示加载动画
        productLoader.style.display = 'flex';
        productEmpty.style.display = 'none';


        // 调用后端API获取商品数据
        fetch('/goods/all')
            .then(response => response.json())
            .then(productData => {
                renderProductTable(productData);
                totalProducts.textContent = productData.length;

                // 计算统计数据
                const availableCount = productData.filter(p => p.gNum > 0).length;
                const popularCount = productData.filter(p => p.gNum > 0 && p.gNum < 20).length;
                const totalSales = productData.reduce((sum, product) => sum + (product.gPrice * 100), 0);

                availableProducts.textContent = availableCount;
                popularProducts.textContent = popularCount;
                productSales.textContent = '¥' + (totalSales / 100).toLocaleString();

                // 隐藏加载动画
                productLoader.style.display = 'none';
            })
            .catch(error => {
                console.error('获取商品数据失败:', error);
                productLoader.style.display = 'none';
                productEmpty.style.display = 'block';
            });
    }


    // 渲染商品表格
    function renderProductTable(productData) {
        productTableBody.innerHTML = '';


        if (productData.length === 0) {
            productEmpty.style.display = 'block';
            return;
        }


        productData.forEach(product => {
            const row = document.createElement('tr');

            // 根据库存状态确定标签样式
            let statusClass = 'in-stock';
            let statusText = '库存充足';

            if (product.gNum === 0) {
                statusClass = 'out-of-stock';
                statusText = '缺货';
            } else if (product.gNum <= 20) {
                statusClass = 'low-stock';
                statusText = '库存紧张';
            }

            row.innerHTML = `
                <td>${product.gId}</td>
                <td><strong>${product.gName}</strong></td>
                <td>${product.gDes || '盲盒'}</td>
                <td class="price-tag">¥${product.gPrice.toFixed(2)}</td>
                <td>${product.gNum}</td>
                <td><span class="stock-status ${statusClass}">${statusText}</span></td>
            `;


            productTableBody.appendChild(row);
        });
    }

    // 从数据库获取订单数据
    function fetchOrders() {
        // 显示加载动画
        orderLoader.style.display = 'flex';
        orderEmpty.style.display = 'none';


        // 获取筛选参数
        const status = statusFilter.value;
        const start = startDate.value;
        const end = endDate.value;
        const min = minAmount.value;
        const max = maxAmount.value;

        // 构建查询参数
        const params = new URLSearchParams();
        if (status !== 'all') params.append('status', status);
        if (start) params.append('startDate', start);
        if (end) params.append('endDate', end);
        if (min) params.append('minAmount', min);
        if (max) params.append('maxAmount', max);

        // 调用后端API获取订单数据
        fetch(`/admin/orders?${params.toString()}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const orders = data.data;
                    renderOrderTable(orders);

                    // 更新统计数据
                    totalOrders.textContent = data.total || orders.length;
                    pendingOrders.textContent = orders.filter(o => o.oStatus === 0).length;
                    shippingOrders.textContent = orders.filter(o => o.oStatus === 2).length;
                    completedOrders.textContent = orders.filter(o => o.oStatus === 3).length;
                } else {
                    orderEmpty.style.display = 'block';
                }

                // 隐藏加载动画
                orderLoader.style.display = 'none';
            })
            .catch(error => {
                console.error('获取订单数据失败:', error);
                orderLoader.style.display = 'none';
                orderEmpty.style.display = 'block';
            });
    }


    // 渲染订单表格
    function renderOrderTable(orders) {
        orderTableBody.innerHTML = '';


        if (!orders || orders.length === 0) {
            orderEmpty.style.display = 'block';
            return;
        }


        orders.forEach(order => {
            const row = document.createElement('tr');
            const orderDate = new Date(order.oTime).toLocaleString();

            // 获取状态文本和样式
            let statusText, statusClass;
            switch(order.oStatus) {
                case 0:
                    statusText = "待付款";
                    statusClass = "status-pending";
                    break;
                case 1:
                    statusText = "已付款";
                    statusClass = "status-paid";
                    break;
                case 2:
                    statusText = "已发货";
                    statusClass = "status-shipped";
                    break;
                case 3:
                    statusText = "已完成";
                    statusClass = "status-completed";
                    break;
                case 4:
                    statusText = "已取消";
                    statusClass = "status-cancelled";
                    break;
                default:
                    statusText = "未知状态";
                    statusClass = "status-pending";
            }

            row.innerHTML = `
                <td>${order.oId}</td>
                <td>${order.uId}</td>
                <td><strong>${order.gName || '未知商品'}</strong></td>
                <td>${order.oNum}</td>
                <td class="price-tag">¥${order.oPrice.toFixed(2)}</td>
                <td>${orderDate}</td>
                <td><span class="order-status ${statusClass}">${statusText}</span></td>
                <td>
                    <button class="action-btn small" data-id="${order.oId}" data-action="view">
                        <i class="fas fa-eye"></i>
                    </button>
                    <button class="action-btn small" data-id="${order.oId}" data-action="edit">
                        <i class="fas fa-edit"></i>
                    </button>
                </td>
            `;


            orderTableBody.appendChild(row);
        });
    }


    // 切换管理部分
    function switchManagementSection(sectionId) {
        // 更新导航项状态
        navItems.forEach(item => {
            if (item.dataset.section === sectionId) {
                item.classList.add('active');
            } else {
                item.classList.remove('active');
            }
        });

        // 更新内容区域
        managementSections.forEach(section => {
            if (section.id === sectionId) {
                section.classList.add('active');
            } else {
                section.classList.remove('active');
            }
        });

        // 更新标题
        const sectionTitles = {
            'user-management': '用户管理',
            'product-management': '商品管理',
            'order-management': '订单管理'
        };
        headerTitle.textContent = sectionTitles[sectionId] || '后台管理';

        // 更新搜索框提示
        searchInput.placeholder = sectionId === 'user-management' ? '搜索用户...'
            : sectionId === 'product-management' ? '搜索商品...'
                : '搜索订单...';


        // 加载对应数据
        if (sectionId === 'user-management') {
            fetchUsers();
        } else if (sectionId === 'product-management') {
            fetchProducts();
        } else if (sectionId === 'order-management') {
            fetchOrders();
        }
    }



    // 登录功能
    loginBtn.addEventListener('click', function() {
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;


        // 调用后端登录API
        fetch('/admin/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`
        })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // 登录成功
                    sessionStorage.setItem('adminLoggedIn', 'true');
                    adminName.textContent = username;


                    loginContainer.style.display = 'none';
                    mainContainer.style.display = 'flex';


                    // 获取用户数据
                    fetchUsers();
// 获取订单数据
                    fetchOrders();

                } else {
                    // 登录失败
                    errorMessage.style.display = 'block';


                    // 添加错误动画
                    document.getElementById('username').style.borderColor = 'var(--danger)';
                    document.getElementById('password').style.borderColor = 'var(--danger)';


                    setTimeout(() => {
                        document.getElementById('username').style.borderColor = '';
                        document.getElementById('password').style.borderColor = '';
                    }, 1000);
                }
            })
            .catch(error => {
                console.error('登录请求失败:', error);
                errorMessage.style.display = 'block';
            });
    });


    // 退出登录
    logoutBtn.addEventListener('click', function() {
        if (confirm('确定要退出登录吗？')) {
            sessionStorage.removeItem('adminLoggedIn');
            mainContainer.style.display = 'none';
            loginContainer.style.display = 'flex';


            // 清空表单
            document.getElementById('username').value = '';
            document.getElementById('password').value = '';
            errorMessage.style.display = 'none';
        }
    });


    // 导航菜单点击事件
    navItems.forEach(item => {
        item.addEventListener('click', function() {
            const sectionId = this.dataset.section;
            if (sectionId) {
                switchManagementSection(sectionId);
            }
        });
    });

    // 刷新用户数据
    refreshUsersBtn.addEventListener('click', fetchUsers);

    // 刷新商品数据
    refreshProductsBtn.addEventListener('click', fetchProducts);

    // 刷新订单数据
    refreshOrdersBtn.addEventListener('click', fetchOrders);



    // 搜索功能
    searchInput.addEventListener('input', function() {
        const searchTerm = this.value.toLowerCase().trim();
        const activeSection = document.querySelector('.management-section.active').id;

        if (activeSection === 'user-management') {
            const rows = document.querySelectorAll('#user-table-body tr');
            rows.forEach(row => {
                const text = row.textContent.toLowerCase();
                row.style.display = text.includes(searchTerm) ? '' : 'none';
            });
        } else if (activeSection === 'product-management') {
            const rows = document.querySelectorAll('#product-table-body tr');
            rows.forEach(row => {
                const text = row.textContent.toLowerCase();
                row.style.display = text.includes(searchTerm) ? '' : 'none';
            });
        }
    });


    // 页面加载时检查登录状态
    window.addEventListener('DOMContentLoaded', checkLoginStatus);
</script>
</body>
</html>

